<!DOCTYPE html>
<html>
<head>
		<meta charset="UTF-8">
		<link rel="stylesheet" href="assets/css/supersized.css">
    
		<script src="../js/jquery-1.10.2.min.js"></script>
		<!--title>文曲星模拟器</title-->
    <script src="src/m65c02.js"></script>
    <!--<script src="refs/wqxsimlogs.js"></script>-->
    <script src="src/wqx.js"></script>
    <script src="src/keyinput.js"></script>
    <style>
        #wqx {
            width: 370px;
        }
        #lcd {
            width: 320px;
            height: 160px;
            background-color: #98fb98;
            padding: 0 25px;
        }
        #keypad {
            border: 1px solid gray;
            border-radius: 5px;
            padding: 5px 3px 5px 5px;
            width: 360px;
            height: 152px;
        }
        #keypad>div {
            height: 24px;
            margin-bottom: 2px;
        }
        .keypad_unit {
            width: 32px;
            height: 20px;
            border-radius: 3px;
            display: inline-block;
            background-color: rgb(213, 233, 205);
            border: 1px solid rgb(128, 208, 70);
            margin-right: 2px;
            -webkit-user-select: none;
            -moz-user-select: none;
            -o-user-select: none;
            cursor: pointer;
        }
        .keypad_unit.pressed {
            background-color: rgb(192, 192, 192);
            border-color: black;
        }
        .keypad_unit_label {
            font-size: 12px;
            line-height: 20px;
            color: rgb(128, 208, 70);
            text-align: center;
            position: absolute;
            width: 32px;
            height: 20px;
        }
    </style>
</head>
<body>
<h1>文曲星模拟器</h1>
<button id="run" onclick="run();" disabled>run</button>
<button id="stop" onclick="stop();" disabled>stop</button>
<button id="reset" onclick="reset();">reset</button>
<button id="load_demo" onclick="loadDemo();">loadDemo</button>
<div id="wqx">
    <div id="lcd"></div>
    <div>
        <button id="toogle_keypad">软键盘 开/关</button>
        <label><input tabindex="0" id="input" type="text" placeholder="键盘输入" style="ime-mode: disabled;"/></label>
    </div>
    <div id="keypad">
        <div>
            <div class="keypad_unit" data-key="F8"><div class="keypad_unit_label">Dict</div>
            </div><div class="keypad_unit" data-key="F9"><div class="keypad_unit_label">Card</div>
            </div><div class="keypad_unit" data-key="F10"><div class="keypad_unit_label">Calc</div>
            </div><div class="keypad_unit" data-key="F6"><div class="keypad_unit_label">Rem</div>
            </div><div class="keypad_unit" data-key="F7"><div class="keypad_unit_label">Data</div>
            </div><div class="keypad_unit" data-key="F5"><div class="keypad_unit_label">Time</div>
            </div><div class="keypad_unit" data-key="F11"><div class="keypad_unit_label">Net</div>
            </div><div class="keypad_unit" style="visibility: hidden">
            </div><div class="keypad_unit" style="visibility: hidden">
            </div><div class="keypad_unit" style="visibility: hidden"></div>
        </div>
        <div>
            <div class="keypad_unit" style="visibility: hidden">
            </div><div class="keypad_unit" style="visibility: hidden">
            </div><div class="keypad_unit" data-key="F1"><div class="keypad_unit_label">F1</div>
            </div><div class="keypad_unit" data-key="F2"><div class="keypad_unit_label">F2</div>
            </div><div class="keypad_unit" data-key="F3"><div class="keypad_unit_label">F3</div>
            </div><div class="keypad_unit" data-key="F4"><div class="keypad_unit_label">F4</div>
            </div><div class="keypad_unit" style="visibility: hidden">
            </div><div class="keypad_unit" style="visibility: hidden">
            </div><div class="keypad_unit" data-key="F12"><div class="keypad_unit_label">Power</div>
            </div><div class="keypad_unit" style="visibility: hidden"></div>
        </div>
        <div>
            <div class="keypad_unit" data-key="Q"><div class="keypad_unit_label">Q</div>
            </div><div class="keypad_unit" data-key="W"><div class="keypad_unit_label">W</div>
            </div><div class="keypad_unit" data-key="E"><div class="keypad_unit_label">E</div>
            </div><div class="keypad_unit" data-key="R"><div class="keypad_unit_label">R</div>
            </div><div class="keypad_unit" data-key="T"><div class="keypad_unit_label">T</div>
            </div><div class="keypad_unit" data-key="Y"><div class="keypad_unit_label">Y</div>
            </div><div class="keypad_unit" data-key="U"><div class="keypad_unit_label">U</div>
            </div><div class="keypad_unit" data-key="I"><div class="keypad_unit_label">I</div>
            </div><div class="keypad_unit" data-key="O"><div class="keypad_unit_label">O</div>
            </div><div class="keypad_unit" data-key="P"><div class="keypad_unit_label">P</div></div>
        </div>
        <div>
            <div class="keypad_unit" data-key="A"><div class="keypad_unit_label">A</div>
            </div><div class="keypad_unit" data-key="S"><div class="keypad_unit_label">S</div>
            </div><div class="keypad_unit" data-key="D"><div class="keypad_unit_label">D</div>
            </div><div class="keypad_unit" data-key="F"><div class="keypad_unit_label">F</div>
            </div><div class="keypad_unit" data-key="G"><div class="keypad_unit_label">G</div>
            </div><div class="keypad_unit" data-key="H"><div class="keypad_unit_label">H</div>
            </div><div class="keypad_unit" data-key="J"><div class="keypad_unit_label">J</div>
            </div><div class="keypad_unit" data-key="K"><div class="keypad_unit_label">K</div>
            </div><div class="keypad_unit" data-key="L"><div class="keypad_unit_label">L</div>
            </div><div class="keypad_unit" data-key="Enter"><div class="keypad_unit_label">Enter</div></div>
        </div>
        <div>
            <div class="keypad_unit" data-key="Z"><div class="keypad_unit_label">Z</div>
            </div><div class="keypad_unit" data-key="X"><div class="keypad_unit_label">X</div>
            </div><div class="keypad_unit" data-key="C"><div class="keypad_unit_label">C</div>
            </div><div class="keypad_unit" data-key="V"><div class="keypad_unit_label">V</div>
            </div><div class="keypad_unit" data-key="B"><div class="keypad_unit_label">B</div>
            </div><div class="keypad_unit" data-key="N"><div class="keypad_unit_label">N</div>
            </div><div class="keypad_unit" data-key="M"><div class="keypad_unit_label">M</div>
            </div><div class="keypad_unit" data-key="PageUp"><div class="keypad_unit_label">PgUp</div>
            </div><div class="keypad_unit" data-key="Up"><div class="keypad_unit_label">Up</div>
            </div><div class="keypad_unit" data-key="PageDown"><div class="keypad_unit_label">PgDn</div></div>
        </div>
        <div>
            <div class="keypad_unit" data-key="Tab"><div class="keypad_unit_label">Help</div>
            </div><div class="keypad_unit" data-key="Shift"><div class="keypad_unit_label">Shift</div>
            </div><div class="keypad_unit" data-key="CapsLock"><div class="keypad_unit_label">Caps</div>
            </div><div class="keypad_unit" data-key="Esc"><div class="keypad_unit_label">Esc</div>
            </div><div class="keypad_unit" data-key="0"><div class="keypad_unit_label">0</div>
            </div><div class="keypad_unit" data-key="Period"><div class="keypad_unit_label">.</div>
            </div><div class="keypad_unit" data-key="Equals"><div class="keypad_unit_label">=</div>
            </div><div class="keypad_unit" data-key="Left"><div class="keypad_unit_label">Left</div>
            </div><div class="keypad_unit" data-key="Down"><div class="keypad_unit_label">Down</div>
            </div><div class="keypad_unit" data-key="Right"><div class="keypad_unit_label">Right</div></div>
        </div>
    </div>
</div>
<p>
    <span> 
        目前只在chrome浏览器测试过，<br/>
        别的浏览器应该也有能跑的。<br/>
        由于ROM文件有24M之大，若加载过慢，<br/>
        请自行下载到硬盘上，<br/>
        拖拽到模拟器的屏幕区域手动加载。<br/>
        若想要离线使用能正常加载，<br/>
        请在chrome启动参数中加入:<br/>
        `--allow-file-access-from-files`。<br/>
        <a href="./rom/obj_lu.bin">ROM文件下载地址</a></span>
</p>
<script>
//    var table = document.createElement('table');
//    table.style.cssText = 'position:fixed; right: 150px; top: 150px;';
//    table.border = "1";
//    for (var i=0; i<8; i++) {
//        var row = table.insertRow(-1);
//        for (var j=0; j<8; j++) {
//            var cell = row.insertCell(-1);
//            cell.innerHTML = '0x' + (i * 8 + j).toString(16);
//            (function (i, j){
//                cell.onmousedown = function (){
//                    wqx.keypadmatrix[j][i] = 1;
//                };
//                cell.onmouseup = function (){
//                    wqx.keypadmatrix[j][i] = 0;
//                };
//            })(i, j);
//        }
//    }
//    document.body.appendChild(table);
</script>
<script>
    var lcdDiv = document.getElementById('lcd')
    var wqx = new Wqx(lcdDiv);
    var keyInput = new WqxKeyInput(wqx, document.getElementById('input'));
    var keypadDiv = document.getElementById('keypad');
    keyInput.onpress = function (key){
        var keyUnit = document.querySelector('div.keypad_unit[data-key="' + key + '"]');
        if (keyUnit) {
            keyUnit.classList.add('pressed');
        }
    };
    keyInput.onrelease = function (key){
        var keyUnit = document.querySelector('div.keypad_unit[data-key="' + key + '"]');
        if (keyUnit) {
            keyUnit.classList.remove('pressed');
        }
    };
    keypadDiv.addEventListener('mousedown', function (evt){
        var div = evt.target;
        do {
            if (div.classList.contains('keypad_unit')) {
                keyInput.keyDown(div.getAttribute('data-key'));
                break;
            }
            div = div.parentNode;
        } while (div && div.nodeType == 1);
    }, false);
    keypadDiv.addEventListener('mouseup', function (evt){
        var div = evt.target;
        do {
            if (div.classList.contains('keypad_unit')) {
                keyInput.keyUp(div.getAttribute('data-key'));
                break;
            }
            div = div.parentNode;
        } while (div && div.nodeType == 1);
    }, false);
    document.getElementById('toogle_keypad').addEventListener('click', function (){
        if (keypadDiv.style.display === 'none') {
            keypadDiv.style.display = '';
        } else {
            keypadDiv.style.display = 'none';
        }
    }, false);

    var romLoaded = false;
    var norLoaded = false;
    var xhrRom = null;
    function check(){
        if (romLoaded && norLoaded) {
            document.getElementById('run').removeAttribute('disabled');
        }
    }
    lcdDiv.addEventListener('dragover', function (evt){
        evt.preventDefault();
    }, false);
    lcdDiv.addEventListener('drop', function (evt){
        var file;
        try {
            file = evt.dataTransfer.files[0];
        } catch(ex){}
        var fileReader = new FileReader();
        fileReader.addEventListener('loadend', function (evt){
            if (!xhrRom) {
                xhrRom.abort();
                xhrRom = null;
            }
            wqx.loadBROM(fileReader.result);
            romLoaded = true;
            check();
        }, false);
        fileReader.readAsArrayBuffer(file);
        evt.preventDefault();
    }, false);

    function loadDemo(){
        var xhrNor = new XMLHttpRequest();
        xhrNor.open('GET', './rom/nc1020.fls', true);
        xhrNor.responseType = 'arraybuffer';
        xhrNor.addEventListener('loadend', function (){
            wqx.loadNorFlash(xhrNor.response);
            norLoaded = true;
            check();
        }, false);
        xhrNor.send();
        // todo: progress info
        document.getElementById('load_demo').setAttribute('disabled', 'disabled');
        xhrRom = new XMLHttpRequest();
        xhrRom.addEventListener('progress', function (evt){
            document.getElementById('load_demo').innerHTML = 'ROM加载中 ' + evt.loaded + '/' + evt.total;
        }, false);
        xhrRom.addEventListener('loadend', function (){
            document.getElementById('load_demo').innerHTML = 'ROM加载完毕';
            wqx.loadBROM(xhrRom.response);
            romLoaded = true;
            check();
        }, false);
        xhrRom.open('GET', './rom/obj_lu.bin', true);
        xhrRom.responseType = 'arraybuffer';
        xhrRom.send();

    }

    function run(){
        wqx.run();
        document.getElementById('run').setAttribute('disabled', 'disabled');
        document.getElementById('stop').removeAttribute('disabled');
    }
    function stop(){
        wqx.stop();
        document.getElementById('stop').setAttribute('disabled', 'disabled');
        document.getElementById('run').removeAttribute('disabled');
    }
    function reset(){
        wqx.reset();
    }

</script>
    	<!-- logo start -->
    <div class="logocontainer">
    	<div class="row">
            <div class="templatemo_footer">Copyright © 2019 motoedy - <a href="../index.html" title="motoedy专属网页" >motoedy专属网页</a></div>
       </div>
    </div>
    <!-- logo end -->  

<!-- Javascript -->
    <!--script src="assets/js/supersized.3.2.7.min.js"></script>
    <script src="assets/js/supersized-init.js"></script-->
</body>
</html>